<template>
  <ul>
    <li><router-link to="/home">首页</router-link></li>
    <li><router-link to="/about">关于</router-link></li>
  </ul>
  <h2>App组件</h2>

  <router-view v-slot="{ Component }">
    <transition name="fade">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </transition>
  </router-view>
</template>


<script setup></script>

<style>
.fade-enter-from {
  transform: translateX(100px);
}
.fade-enter-to {
  transform: translateX(0);
}
.fade-enter-active {
  transition: transform 0.5s;
}

/* .fade-leave-from {
  opacity: 1;
}
.fade-leave-to {
  opacity: 0;
}
.fade-leave-active {
  transition: opacity 1s;
} */
</style>